<template>
  <Menu
    :isHorizontal="isHorizontal"
    :mode="mode"
    :class="menuClass"
    :items="menus"
    :onMenuClick="handleMenuClick"
    :collapse="isCollapsed"
  />

  <LayoutTrigger v-if="!isHorizontal" :class="`${prefixCls}__trigger`" />
</template>
<script lang="tsx" setup>
import { unref, computed, toRaw } from 'vue';
import { MenuModeEnum } from '@/enums/menu-enum';
import LayoutTrigger from '../trigger/index.vue';
import { useRouter } from 'vue-router';
import { getGlobalCls } from '@/utils/index';
import { usePermissionStore } from '@/store/modules/permission';
import { useAppStore } from '@/store/modules/app';
import Menu from './menu/index.vue';

const appStore = useAppStore();

const permissionStore = usePermissionStore();

const { prefixCls } = getGlobalCls('menu-side');

const isCollapsed = computed(() => appStore.getMenuSetting.collapsed);

const mode = computed(() => appStore.getMenuSetting.mode);
const { push } = useRouter();

const isHorizontal = computed(() => {
  return unref(mode) === MenuModeEnum.HORIZONTAL;
});

const menuClass = computed(() => {
  return [!isHorizontal.value && `${prefixCls}-scroll-vertical`];
});

/**
 * click menu
 * @param menu
 */

function handleMenuClick(path: any): void {
  push(path);
}

// const menuProps = computed(() => {
//   const menus = toRaw(permissionStore.getMenuList);
//   return {
//     // beforeClickFn: beforeMenuClickFn,
//     items: menus,
//     collapse: unref(isCollapsed),
//     onMenuClick: handleMenuClick,
//   };
// });
const menus = computed(() => toRaw(permissionStore.getMenuList));
</script>
<style lang="scss">
  $prefix-cls: #{config.$namespace}-menu-side;
  .#{$prefix-cls}__trigger {
    height: 38px;
    display: flex;
    width: 100%;
    justify-content: center;
    left: 0;
    bottom: 0;
    color: var(--menu-text-color);
    cursor: pointer;
  }
  .#{$prefix-cls}-scroll-vertical {
    height: calc(100% - 38px);
    overflow-y: auto;
  }
</style>
